<template>
  <div class="container">
    <div class="handle-box">
      <span style="padding:8px;">按订单号</span>
      <el-input v-model="query.ordersn"
                placeholder=" "
                class="handle-input mr10"></el-input>   

      <span style="padding:8px;">学生id</span>
      <el-input v-model="query.code"
                placeholder=" "
                class="handle-input mr10"></el-input>

      <span style="padding:8px;">按姓名：</span>
      <el-input v-model="query.name"
                placeholder=" "
                class="handle-input mr10"></el-input>
    
       <span style="padding:8px;">按手机号</span>
      <el-input v-model="query.mobile"
                placeholder=" "
                class="handle-input mr10"></el-input>

      <span style="padding:8px;">按地址</span>
      <el-input v-model="query.addr"
                placeholder=" "
                class="handle-input mr10"></el-input>
              
   
 
    
     
    </div>



    <div class="handle-box"> 
      <!-- <span style="padding:8px;">按课程名</span>
      <el-input v-model="query.kcname"
                placeholder=" "
                class="handle-input mr10"></el-input> -->


                <span style="padding:8px;">课程</span>
                <el-select v-model="query.kcsendid" placeholder="请选择">
                        <el-option v-for="item in kechenglist" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>            
      <span style="padding:8px;">下单时间</span>
      <el-date-picker v-model="query.time"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd">></el-date-picker>


 
      <el-button type="success"
                 icon="el-icon-search"
                 size="medium"
                 @click="handleSearch">搜索</el-button>
      <!-- <el-button type="warning"
                 size="medium"
                 icon="el-icon-refresh-left"
                 @click="resultClick()">重置</el-button> -->

                 <downExcel
                        :fetch-data="excelExport"
                        :json-fields="jsonFields"
                        :fill-name="fillName"
                    ></downExcel>
    </div>


    

    <div style="padding: 10px">
       
            <!-- <el-button type="primary" icon="el-icon-document-add" size="medium" @click="createMethod">新建</el-button> -->
            <!-- <span style="padding: 8px"></span> -->
            <!-- <el-button type="danger" icon="el-icon-delete" size="medium" @click="delAllSelection">批量删除</el-button> -->
 

           <!-- <el-button type="warning"
                     icon="el-icon-download"
                     size="medium"
                     @click="importPerson">导入</el-button> -->
         

            

        </div>


    <el-table :data="tableData"
              border
              ref="multipleTable"
              header-cell-class-name="table-header"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55"
                       align="center"></el-table-column>
      <el-table-column label="序号"
                       align="center"
                       width="100"
                       fixed>
        <template slot-scope="scope">{{scope.$index+(query.pageIndex - 1) * query.pageSize + 1}}</template>
      </el-table-column>
      <el-table-column label="订单号" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
     
      <el-table-column label="项目名" align="center" width="200px">
          <template slot-scope="scope">{{ scope.row.kcname }}</template>
      </el-table-column>
      <el-table-column label="学生id" align="center" width="180px">
          <template slot-scope="scope">{{ scope.row.code }}</template>
      </el-table-column>
      <el-table-column label="学生" align="center" width="120px">
          <template slot-scope="scope">{{ scope.row.username }}</template>
      </el-table-column>
   
      <el-table-column label="昵称" align="center" width="120px">
          <template slot-scope="scope">{{ scope.row.s_name }}</template>
      </el-table-column>

       <!-- <el-table-column label="学生(备注)" align="center" width="120px">
          <template slot-scope="scope">{{ scope.row.usernameod }}</template>
      </el-table-column> -->

      <el-table-column label="手机" align="center" width="140px"  >
          <template slot-scope="scope">{{ scope.row.mobile }}</template>
      </el-table-column>
 


       <el-table-column label="地区" align="center" width="120px">
          <template slot-scope="scope">{{ scope.row.descp }}</template>
      </el-table-column>
      		
      <el-table-column label="顾问" align="center">
          <template slot-scope="scope">{{ scope.row.adviser }}</template>
      </el-table-column>
      <el-table-column label="电话" align="center" width="140px">
          <template slot-scope="scope">{{ scope.row.adviser_mobile }}</template>
      </el-table-column>
      <el-table-column label="付费时间" align="center" width="120px">
          <template slot-scope="scope">{{ scope.row.paytime }}</template>
      </el-table-column>

      			
      <el-table-column label="金额" align="center">
          <template slot-scope="scope">{{ scope.row.cose }}</template>
      </el-table-column>

      <el-table-column label="上线" align="center" width="140px">
          <template slot-scope="scope">{{ scope.row.dad }}</template>
      </el-table-column>

      <!-- <el-table-column label="支付状态" align="center">
          <template slot-scope="scope">{{ scope.row.statustext }}</template>
      </el-table-column>     -->
      
      <el-table-column label="支付状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">未支付</span>
            <span v-if="scope.row.status == 2">已支付</span> 
            <span v-if="scope.row.status == 3">已退款</span> 
            
          </template>
      </el-table-column>	 

      <el-table-column label="支付方式" align="center">
          <template slot-scope="scope">{{ scope.row.paytypetext }}</template>
      </el-table-column>
      <el-table-column label="原因" align="center" width="140px"  >
          <template slot-scope="scope">{{ scope.row.mark }}</template>
      </el-table-column>

       <!-- <el-table-column label="支付方式" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.paytype == 1">在线支付</span>
            <span v-if="scope.row.paytype == 2">现金支付</span> 
          </template>
      </el-table-column>	  -->

      <!-- <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">{{scope.row.addtime}}</template>
      </el-table-column> -->

            <el-table-column label="操作"
                       width="200"
                       align="center">
        <template slot-scope="scope">
          <el-button @click="createBus(scope.row)"
                     type="text"
                     size="small"
                     icon="el-icon-edit">详情</el-button>

 
        <el-button @click="handleChangest(scope.row,2)" type="text" size="small" v-if="scope.row.status==1">设置已付</el-button>
         
         <el-button @click="handleChangest(scope.row,1)" type="text" size="small" v-if="scope.row.status==2">取消支付</el-button>



        <!-- <el-button @click="backTomycustomer(scope.row)" type="text" size="small" >修改状态</el-button> -->

         <!-- <el-button @click="showprocess(scope.row)" type="text" size="small" >查看进度</el-button> -->
         <!-- <el-button @click="handleChangest(scope.row,2)" type="text" size="small" v-if="scope.row.status==1">发货</el-button> -->
         
         <!-- <el-button @click="handleChangest(scope.row,1)" type="text" size="small" v-if="scope.row.status==2">取消发货</el-button> -->

          <!-- <el-button @click="handleDelete(scope.row)"
                     type="text"
                     size="small"
                     icon="el-icon-delete"
                     class="red">删除</el-button> -->
        </template>
      </el-table-column>


    </el-table>
    <div class="pagination">
      <el-pagination background
                     layout="total, prev, pager, next, jumper"
                     :current-page="query.pageIndex"
                     :page-size="query.pageSize"
                     :total="pageTotal"
                     @current-change="handlePageChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import api from '@/api/index';
import {getdate} from '@/utils/utils'
import imgUpload from '@/components/views/commons/ImgUpload';
import fileUpload from '@/components/views/commons/fileUpload';
import downExcel from '@/components/views/commons/ExcelModel';
export default {
  name: "financeList",
  components:{imgUpload,fileUpload,downExcel},
  data () {
    return {
      docLoadPath: api.API_PATH+"/",
      wordUpLoad: api.uploadFileall,
      API_PATH: api.API_PATH,
      COMPANYUSEREXPORT: api.orderexport,
      docLoadPath: api.IMG_PATH,
      zzTypeist: [],
      kechenglist:[],
      query: {
        pageIndex: 1,
        pageSize: 10,
        ordersn:'',
        code: '',
        name: '',
        mobile: '',
        addr: '',       
        time: '',
        kcname: '',
        kcsendid:'',

      },
      zzTypeist: [],
      pageTotal: 0,
      tableData: [],
      fId:'',
      f_text:'',
      fTextModel:false,
      jsonFields: {},
      fillName: '',
    }
  }, 
  filters:{
    toFixedFile:function(val){
      if(!val)return '0.00';
      return Number(val).toFixed(2)
    },
    formDate: (val) => {
        if (!val) return '';
        return getdate(val);
    }
  },
  mounted () {
    this.initAjaxMethod();
    this.KcchlidListAjaxMethd();
  },

  methods: {
    ohterAjaxMethd(){
      this.$http.post(api.REG_BAISE_STORE_LIST)
          .then((res) => {
            console.log('项目列表', res)
            if (res.code == 1) {
              this.zzTypeist=Array.isArray(res.data)?res.data:[]
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err.msg);
          })
    },
    KcchlidListAjaxMethd() {
    //   this.kcsendid = '';
      this.kechenglist = [];           
      this.$http.post(api.getKcchlidList, { 'openid': 11 })
        .then((res) => {
          console.log('城市列表', res);
          if (res.code == 1) {
             this.kechenglist = Array.isArray(res.data) && res.data.length > 0 ? res.data : '';
           
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },

    //删除
    handleDelete(data){
      this.delAjaxMethod(data.id);
    },
    //编辑
    createBus(row){
      this.$router.push({ path: '/memberHistoryAdd', query: {id:row.id, type: 2}})
    },
    resultClick () {
      this.query.name = '';
      this.query.mobile = '';
      this.query.store_id = '';
      this.query.pageIndex=1;
      this.initAjaxMethod()
    },
    createMethod () {
      this.$router.push({ path: '/memberCardAdd', query: { type: 1 } })
    },
    // 多选操作
 
        // 多选操作
   handleSelectionChange (val) {
      this.multipleSelection = val;

      var emptyIdList = [];
      for (var i = 0; i < val.length; i++) {
        emptyIdList.push(val[i].id);
      }
      this.idList = emptyIdList;
      console.log(this.idList);


    },


    delAllSelection () {
      let arr = [];
      if (this.multipleSelection.length <= 0) {
          this.$message({
              type: 'error',
              message: '请选择一个'
          });
          return false;
      } else {
          this.multipleSelection.forEach(item => {
              arr.push(item.id);
          });
          this.delAjaxMethod(arr.join(','));
      }
    },
    delAjaxMethod(ids){
      this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({ text: '加载中...' });
        this.$http.post(api.TECHNICIAN_CONSUMPTION_Del, {ids:ids})
              .then((res) => {
                loading.close();
                console.log('项目列表', res)
                if (res.code == 1) {
                  this.$message.success('删除成功');
                  this.query.pageIndex=1;
                  this.initAjaxMethod()
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$message.error(err.msg);
              })
      })
    },


    handleChangest(data1,st){
      let ids=data1.id;
      //  this.delAjaxMethod(data1.id);
      this.$confirm('是否继续操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({ text: '加载中...' });
        this.$http.post(api.TECHNICIAN_CONSUMPTION_changestatus, {ids:ids,status:st})
              .then((res) => {
                loading.close();
                console.log('项目列表', res)
                if (res.code == 1) {
                  this.$message.success('操作成功');
                  this.query.pageIndex=1;
                  this.initAjaxMethod()
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$message.error(err.msg);
              })
      })
    },

   
    // 分页导航
    handlePageChange (val) {
      this.$set(this.query, 'pageIndex', val);
      this.initAjaxMethod();
    },
    handleSearch () {
      this.$set(this.query, 'pageIndex', 1);
      this.initAjaxMethod()
    },
    initAjaxMethod () { 

      let data = {
        pageIndex: this.query.pageIndex,//[string]	是	当前页
        pageSize: this.query.pageSize,//[string]	是	每页条数
        ordersn: this.query.ordersn,
        code: this.query.code,//[string]	是	付款名称
        name: this.query.name,//[string]	是	付款名称
        mobile: this.query.mobile,
        addr: this.query.addr,
        kcname: this.query.kcname,
        kcsendid:this.query.kcsendid
        // time: JSON.stringify(this.query.time),
      };
      if(this.query.time){
        data.time=JSON.stringify(this.query.time);
      }
  


      this.$http.post(api.TECHNICIAN_CONSUMPTION_INDEX, data)
        .then((res) => {
          console.log('财务', res)
          if (res.code == 1) {
            this.tableData = Array.isArray(res.data.list)?res.data.list:[];
            this.pageTotal = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        })
    },
    

    async excelExport() {
            const loading = this.$loading({ text: '加载中...' });
            let arr = [];
            //  this.idList
            // this.idList.forEach(item => {
            //     arr.push(item);
            // });

            let time1="";
            if(this.query.time){
              time1=JSON.stringify(this.query.time);
            }
            //后台 json
  
            const response = await this.$http.post(api.orderexport, {
                 page: this.query.pageIndex,//[string]	是	当前页
                pageSize: this.query.pageSize,//[string]	是	每页条数
             
                time:time1,
                keyword: this.searchName,

                 ordersn: this.query.ordersn,
                code: this.query.code,//[string]	是	付款名称
                name: this.query.name,//[string]	是	付款名称
                mobile: this.query.mobile,
                addr: this.query.addr,
                kcname: this.query.kcname,
                kcsendid:this.query.kcsendid


                // ids: arr.length > 0 ? arr.join(',') : '',
                // roleId:this.roleId
            });
            loading.close();
            console.log('response', response);
            if (response.code == 1) {
                response.data.columns.forEach(item => {
                    this.jsonFields[item.title] = item.field;
                });
                this.fillName = response.data.filename ? response.data.filename : '明细表';
                console.log('this.jsonFields', this.jsonFields);
                console.log('response.data.list', response.data.list);
                return response.data.list;
            }
        },
  }
}
</script>

<style scoped>
.handle-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.el-input--small {
    display: initial;
}
.handle-input {
    width: auto;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.red {
  color: #f56c6c;
}
  .green{
    color:#67C23A;
  }
</style>